<template>
  <div class="form-generator-container">
    <VanFormGenerator
      ref="vanFormGenerator"
      :form-generator="formGenerator"
      @collectInfo="(value) => triggerEvent('collectInfo', value)"
      @validate="(value) => triggerEvent('validate', value)"
      @generator="(value) => triggerEvent('generator', value)"
      @action="(value) => triggerEvent('action', value)"
    />
  </div>
</template>

<script>
import VanFormGenerator from './index';

export default {
  name: 'Generator',

  components: {
    VanFormGenerator
  },

  props: {
    formGenerator: {
      type: Object,
      default: () => ({
        name: '',
        generator: []
      })
    }
  },

  computed: {
    // 表单生成
    vanFormGenerator() {
      return this;
    },

    // refs
    refGenerator() {
      return this.$refs.vanFormGenerator;
    },

    // 元素查找
    components() {
      return this.refGenerator.components;
    },

    // 信息收集
    collectInfo() {
      return this.refGenerator.collectInfo;
    }
  },

  provide() {
    return {
      $$parent: this.vanFormGenerator
    };
  },

  methods: {
    // 事件
    triggerEvent(event, value) {
      this.$emit(event, value);
    },

    // 表单验证
    validate() {
      return this.refGenerator.validate();
    },

    // elements
    getElements() {
      return this.$refs.vanFormGenerator.getElements();
    }
  }
};
</script>
